<script setup>
import { ref, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Message, Modal } from '@arco-design/web-vue'
import api from '@/api'
const $route = useRoute()
const $router = useRouter()

const pageType = $route.query.type

const title = ref('')
const dataList = ref([
  {
    renyuan: '张三',
    shangchuanStatus: 1, //已上传2未上传
    yuyueTime: '2024-01-07',
    son: [
      {
        shijiTime: '2024-01-07 16:42:12',
        mianshiren: '张三三',
        defen: 50,
      },
      {
        shijiTime: '2024-01-08 16:42:12',
        mianshiren: '张三三',
        defen: 50,
      },
    ],
    hejidefen: 100,
    status: 1, // 1录取2待一轮评价3待二轮评价4未录取5已完成评价
  },
])

const addSon = (rowIndex) => {
  data.value[rowIndex].son.push({
    wenti: '问题2',
    yaodian: '要点1',
    putong: 1,
    lianghao: 3,
    youxiu: 5,
  })
}

const deleteSon = (rowIndex, index) => {
  data.value[rowIndex].son.splice(index, 1)
}

const addItem = () => {
  data.value.push({
    bankuai: '',
    son: [
      {
        wenti: '',
        yaodian: '',
        putong: 1,
        lianghao: 3,
        youxiu: 5,
      },
    ],
  })
}

const deleteItem = (rowIndex) => {
  data.value.splice(rowIndex, 1)
}

const toJump = (url) => {
  console.log('router', $router.push(url))
  $router.push(url)
}

const form = reactive({
  bumen: '',
  gangwei: '',
  renshu: '',
  yaoqiu: '',
  muban: '',
  lunshu: '',
})

const detailInfo = ref({})

const handleSubmit = (data) => {
  console.log(data)
}

const goBack = () => {
  $router.go(-1)
}

const handleAdmission = (department) => {
  Modal.confirm({
    title: '提示',
    content: '您确定录取该评价人员吗？',
    bodyStyle: 'text-align:center',
    onBeforeOk: async () => {
      console.log('录取')
      // await api.delete('departments/' + department.id)
      // TODO 检查状态值
      setStatus(1)
      // getListData()
    },
  })
}

const handleEliminate = (department) => {
  Modal.confirm({
    title: '提示',
    content: '您确定淘汰该评价人员吗？',
    bodyStyle: 'text-align:center',
    onBeforeOk: async () => {
      console.log('淘汰')
      // await api.delete('departments/' + department.id)
      setStatus(2)
      // getListData()
    },
  })
}

// 添加评价记录、补充提交
const confrim = async () => {
  if (!pageType) {
    Message.error('请选择操作类型')
    return
  }

  const data = {
    type: pageType,
    evaluate_id: $route.query.evaluate_id,
    evaluate_time: detailInfo.value.evaluate_time,
    content: JSON.stringify(detailInfo.value.template.content),
    remark: detailInfo.value.remark,
    score: detailInfo.value.template.score,
  }
  if (data.evaluate_time === '') {
    Message.error('请选择评价时间')
    return
  }

  const res = await api.post('/evaluate/userSubEvaluate', data)
  if (res.code === 200) {
    Message.success('提交成功')
    goBack()
  } else {
    Message.error(res.message)
  }
}

const openFileUrl = (url) => {
  if (!url) {
    Message.error('文件不存在')
    return
  }
  Modal.confirm({
    title: '提示',
    content: '是否要下载简历文件？',
    bodyStyle: 'text-align:center',
    onOk: async () => {
      window.open(url)
    },
  })
}

const setItemScore = (item, type) => {
  if (!pageType) return
  item.scoreType = type
  if (type === 1) {
    item.score = item.ordinary
  } else if (type === 2) {
    item.score = item.good
  } else {
    item.score = item.excellent
  }

  let total = 0
  detailInfo.value.template.content.forEach((item) => {
    item.son.forEach((son) => {
      total += Number(son.score || 0)
    })
  })

  detailInfo.value.template.score = total
}

const setStatus = async (status) => {
  const res = await api.post('/recruit/userPassRecruit', {
    recuit_plan_id: $route.query.plan_id,
    application_worker_id: $route.query.id,
    type: status,
  })
  if (res.code === 200) {
    Message.success('设置成功')
    goBack()
  } else {
    Message.error(res.message)
  }
}

const getDetail = async () => {
  let url = `/evaluate/evaluateDetails?evaluate_id=${$route.query.evaluate_id}`
  if (pageType == 1) {
    url = `/evaluate/startEvaluate?evaluate_id=${$route.query.evaluate_id}`
  }
  const res = await api.get(url)
  detailInfo.value = res.data
}

const getTotal = (record) => {
  let total = 0
  let score = 0
  record.forEach((item) => {
    total += Number(item.excellent || 0)
    switch (item.scoreType) {
      case 1:
        score = Number(item.ordinary || 0)
        break
      case 2:
        score = Number(item.good || 0)
        break
      case 3:
        score = Number(item.excellent || 0)
        break
      default:
        score = 0
        break
    }
  })
  return score + '/' + total
}

getDetail()
</script>

<template>
  <div class="page">
    <div class="header">评价记录</div>

    <div class="record_body">
      <div class="form_body">
        <a-form auto-label-width :model="detailInfo">
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item field="department_name" label="部门名称">
                <a-input
                  readonly
                  v-model="detailInfo.department_name"
                ></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="post_name" label="岗位名称">
                <a-input readonly v-model="detailInfo.post_name"></a-input>
              </a-form-item>
            </a-col>
          </a-row>
          <!-- <a-row :gutter="24">
            <a-col :span="24">
              <a-form-item field="post_ask" label="岗位要求">
                <a-textarea readonly v-model="detailInfo.post_ask" />
              </a-form-item>
            </a-col>
          </a-row> -->
        </a-form>
      </div>

      <div class="form_body">
        <div class="form_body_title">评价人员信息</div>
        <a-form auto-label-width :model="detailInfo">
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item field="worker_name" label="评价人员姓名">
                <a-input readonly v-model="detailInfo.user_name" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="worker_mobile" label="联系电话">
                <a-input readonly v-model="detailInfo.phone" />
              </a-form-item>
            </a-col>
          </a-row>
          <!-- <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item field="worker_biographical_notes" label="个人简历">
                <a-button
                  type="primary"
                  @click="openFileUrl(detailInfo.worker_biographical_notes)"
                  >点击下载查看</a-button
                >
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="worker_image" label="图像">
                <a-image
                  v-if="detailInfo.worker_image"
                  width="100px"
                  height="100px"
                  :src="detailInfo.worker_image"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item field="worker_email" label="联系邮箱">
                <a-input readonly v-model="detailInfo.worker_email" />
              </a-form-item>
            </a-col>
          </a-row> -->
        </a-form>
      </div>

      <a-divider />

      <div class="form_body" v-if="detailInfo.template">
        <div class="form_body_title tac">{{ detailInfo.template.number }}</div>

        <!-- <a-form auto-label-width v-if="!pageType">
            <a-row :gutter="24">
              <a-col :span="6">
                <a-form-item field="bumen" label="评价官">
                  <a-input readonly :default-value="detailInfo.interview_worker"></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="6" :offset="12">
                <a-form-item field="gangwei" label="评价时间">
                  <a-input readonly :default-value="detailInfo.evaluate_time"></a-input>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form> -->

        <div
          v-if="detailInfo.template.record_status < 2 && !pageType"
          class="mb20"
          style="margin-top: 50px; margin-bottom: 50px; text-align: center"
        >
          <h3>{{ '待' + detailInfo.template.number }}</h3>
        </div>
        <template v-else>
          <div class="flex">
            <div class="table_name">岗位画像配置</div>
            <div class="table_body">
              <a-table
                :data="detailInfo.template.content"
                :pagination="false"
                :bordered="{ headerCell: true, cell: true }"
              >
                <template #columns>
                  <a-table-column
                    title="板块"
                    align="center"
                    data-index="plate_name"
                  >
                    <template #cell="{ record, rowIndex }">
                      <div class="flex at_c">
                        {{ record.plate_name }}({{ getTotal(record.son) }})
                      </div>
                    </template>
                  </a-table-column>
                  <a-table-column
                    title="问题"
                    align="center"
                    data-index="problem"
                  >
                    <template #cell="{ record }">
                      <div
                        class="diytd"
                        v-for="(item, index) in record.son"
                        :key="index"
                      >
                        <a-textarea readonly v-model="item.problem" />
                      </div>
                    </template>
                  </a-table-column>
                  <a-table-column
                    title="考核要点"
                    align="center"
                    data-index="examine"
                  >
                    <template #cell="{ record }">
                      <div
                        class="diytd"
                        v-for="(item, index) in record.son"
                        :key="index"
                      >
                        <a-textarea readonly v-model="item.examine" />
                      </div>
                    </template>
                  </a-table-column>
                  <!-- <a-table-column
                    title="评价回答"
                    align="center"
                    data-index="answer"
                  >
                    <template #cell="{ record }">
                      <div
                        class="diytd"
                        v-for="(item, index) in record.son"
                        :key="index"
                      >
                        <a-textarea v-model="item.answer" />
                      </div>
                    </template>
                  </a-table-column> -->
                  <a-table-column title="分值" align="center">
                    <a-table-column
                      title="普通"
                      align="center"
                      :width="70"
                      data-index="ordinary"
                    >
                      <template #cell="{ record }">
                        <div
                          class="diytd"
                          v-for="(item2, index) in record.son"
                          :key="index"
                        >
                          <div class="h32 jc_c" @click="setItemScore(item2, 1)">
                            <div
                              class="circle_cell"
                              :class="{
                                circle_cell_green: item2.scoreType == 1,
                              }"
                            ></div>
                          </div>
                        </div>
                      </template>
                    </a-table-column>
                    <a-table-column
                      title="良好"
                      align="center"
                      :width="70"
                      data-index="good"
                    >
                      <template #cell="{ record }">
                        <div
                          class="diytd"
                          v-for="(item2, index) in record.son"
                          :key="index"
                        >
                          <div class="h32 jc_c" @click="setItemScore(item2, 2)">
                            <div
                              class="circle_cell"
                              :class="{
                                circle_cell_green: item2.scoreType == 2,
                              }"
                            ></div>
                          </div>
                        </div>
                      </template>
                    </a-table-column>
                    <a-table-column
                      title="优秀"
                      align="center"
                      :width="70"
                      data-index="excellent"
                    >
                      <template #cell="{ record }">
                        <div
                          class="diytd"
                          v-for="(item2, index) in record.son"
                          :key="index"
                        >
                          <div class="h32 jc_c" @click="setItemScore(item2, 3)">
                            <div
                              class="circle_cell"
                              :class="{
                                circle_cell_green: item2.scoreType == 3,
                              }"
                            ></div>
                          </div>
                        </div>
                      </template>
                    </a-table-column>
                  </a-table-column>
                </template>
              </a-table>
            </div>
          </div>
          <div class="table_bottom">
            <div class="name">合计</div>
            <div style="flex: 1">得分：{{ detailInfo.template.score }}</div>
          </div>

          <div class="table_bottom" v-if="pageType">
            <div class="name" style="border: none">备注</div>
            <div
              style="
                margin-left: -0.5px;
                border-left: 1px solid #e5e6eb;
                width: 100%;
              "
            >
              <a-textarea
                type="textarea"
                v-model="detailInfo.remark"
                placeholder="请输入评价官备注"
              />
            </div>
          </div>

          <div class="table_bottom" v-if="!pageType">
            <div class="name">备注</div>
            <!-- <div style="width: 100%">
              <a-textarea
                type="textarea"
                v-model="detailInfo.remark"
                readonly
              />
              
            </div> -->
            <div style="text-align: left">
              {{ detailInfo.remark }}
            </div>
          </div>

          <a-form class="mt20" auto-label-width>
            <a-row :gutter="24">
              <a-col :span="6">
                <a-form-item field="evaluate_time" label="评价时间">
                  <a-date-picker
                    v-if="pageType"
                    v-model="detailInfo.evaluate_time"
                    show-time
                    format="YYYY-MM-DD HH:mm:ss"
                    placeholder="请选择评价时间"
                  />
                  <a-input
                    v-else
                    readonly
                    :default-value="detailInfo.evaluate_time"
                  ></a-input>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </template>
      </div>
    </div>

    <a-affix :offsetBottom="0">
      <div class="page_bottom">
        <a-space>
          <a-button
            v-if="!pageType"
            @click="goBack"
            type="primary"
            status="danger"
            >返回</a-button
          >
          <a-button v-else @click="goBack" type="primary" status="danger"
            >取消</a-button
          >

          <a-button v-if="pageType" @click="confrim" type="primary">{{
            pageType == 1 ? '评价完成' : '完善完成'
          }}</a-button>
        </a-space>
      </div>
    </a-affix>
  </div>
</template>

<style scoped>
.page {
  height: 95%;
  border-bottom: 0;
}

.header {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
}

:deep(.arco-table-cell):has(.diytd) {
  padding: 0;
}
:deep(.arco-table-cell):has(.diytd) .diytd {
  padding: 0.6rem 1.06667rem;
  border-bottom: 1px solid #ddd;
}
:deep(.arco-table-cell):has(.diytd) .diytd:last-child {
  border: none;
}

.diytd {
  height: 80px;
  display: flex;
  align-items: center;
}

.h32 {
  height: 32px;
  display: flex;
  align-items: center;
}

.record_body {
  box-sizing: border-box;
  padding: 20px 24px;
}

.form_body {
  box-sizing: border-box;
  padding: 20px 24px;
  background-color: #fff;
  margin-bottom: 20px;
}

.form_body_title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
}

.table_name {
  width: 100px;
  box-sizing: border-box;
  padding: 0 40px;
  font-size: 14px;
  background-color: #f2f3f5;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #e5e6eb;
}

.table_body {
  width: 100%;
}

.table_bottom {
  display: flex;
  align-items: center;
  background-color: #f2f3f5;
  box-sizing: border-box;
  border-bottom: 1px solid #e5e6eb;
}

.table_bottom > div {
  box-sizing: border-box;
  padding: 0.6rem 1.06667rem;
  text-align: center;
}

.table_bottom > div:not(:last-child) {
  border-right: 1px solid #e5e6eb;
}

.table_bottom .name {
  width: 100px;
}

.page_bottom {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;
  padding: 20px 24px;
  background-color: #fff;
}

.circle_cell {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #819a59;
  box-sizing: border-box;
}

.circle_cell_green {
  background-color: #95f204;
}
</style>
